<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"
          name="viewport"/>
    <title>1元购网络商城微信版</title>
    <link type="text/css" rel="stylesheet" href="css/bootstrap.min.css"/>
    <link type="text/css" rel="stylesheet" href="css/main.css"/>
   

    <script src="js/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="js/MobileSlider.js"></script>
</head>
<body>




<div id="container">
<!--下拉刷新-->
<div class="loading-warp">
    <div class="box">
        <div>
            <img src="images/loading.gif" />
            <span class="text">下拉开始刷新</span>
        </div>
    </div>
</div>

<!--轮播图-->
<div id="sliderBox">
    <div class="slider">
        <ul>
            <li><a href="#0" target="_blank"><img
                    src="images/mac1.jpg"></a>
            </li>
            <li><a href="#0" target="_blank"><img
                    src="images/phone2.jpg"></a>
            </li>
            <li><a href="#0" target="_blank"><img
                    src="images/car1.jpg"></a>
            </li>
        </ul>
    </div>
</div>
<!--导航头-->
<div id="nav-wrapper" class="row">
    <div class="col-xs-3 col-md-3 col-sm-3">
        <div class="thumbnail">
            <img class="img1" src="images/nav_new_recommend_normal.png" alt="">

            <div class="caption">
                <p>新品</p>
            </div>
        </div>
    </div>
    <div class="col-xs-3 col-md-3 col-sm-3">
        <div class="thumbnail">
            <img class="img2" src="images/nav_shaidan_normal.png" alt="">

            <div class="caption">
                <p>晒单</p>
            </div>
        </div>
    </div>
    <div class="col-xs-3 col-md-3 col-sm-3">
        <div class="thumbnail">
            <img class="img3" src="images/nav_shopping_record_normal.png" alt="">

            <div class="caption">
                <p>统计</p>
            </div>
        </div>
    </div>
    <div class="col-xs-3 col-md-3 col-sm-3">
        <div class="thumbnail">
            <img class="img4" src="images/nav_recharge_normal.png" alt="">

            <div class="caption">
                <p>充值</p>
            </div>
        </div>
    </div>
</div>
<!--最新揭晓-->
<div id="date20">
    <a href="#" class="greya"><div class="title" style="border:none;">最新揭晓 <b class="arrow" ></b></div></a>
    <div class="pro-1">
        <div class="pro1">
            <p class="proname">(第1568云) 创维（Skyworth) 55G7200</p>

            <p>02:25:52</p>
        </div>
        <div class="pro-gim1">
            <img src="images/new4.png">
        </div>
    </div>
    <div class="pro-2">
        <div class="pro1">
            <p class="proname">(第1568云) 创维（Skyworth) 55G7200</p>

            <p>02:25:52</p>
        </div>
        <div class="pro-gim1">
            <img src="images/new3.jpg">
        </div>
    </div>
    <div class="pro-3">
        <div class="pro2">
            <p class="proname">(第1568云) 创维（Skyworth) 55G7200</p>

            <p>02:25:52</p>
        </div>
        <div class="pro-gim2">
            <img src="images/new1.jpg">
        </div>
    </div>
    <div class="pro-4">
        <div class="pro2">
            <p class="proname">(第1568云) 创维（Skyworth) 55G7200</p>

            <p>02:25:52</p>
        </div>
        <div class="pro-gim2">
            <img src="images/new2.jpg">
        </div>
    </div>
</div>
<!--人气推荐-->
<div id="hot20" class="hot20">
<a href="#" class="greya"><div class="title">人气推荐<b class="arrow" style=""></b></div></a>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div  class="swiper-slide">
                <ul id="hotul">
                    <li id="11305">
                        <a href="javascript:;" class="g-pic">
                            <img src="http://wlsqbucket.img-cn-shenzhen.aliyuncs.com/yyg/goods/1466561737946.jpg"
                                 width="136" height="136">
                        </a>
                        <span class="gray9">价值：￥338.00元</span>
                        <em style="color:#666">
                            <div class="Progress-bar">
                                <p class="u-progress">
                      <span class="pgbar" style="width: 12.42603550295858%;">
                        <span class="pging"></span>
                      </span>
                                </p>
                            </div>
                        </em>

                        <div class="partIn">
                            <div class="already">
                                <span class="orange">62</span><br>
                                <span>已参与</span>
                            </div>
                            <div class="all">
                                <span class="allNum">100000</span><br>
                                <span>总需人次</span>
                            </div>
                            <div class="overplus">
                                <span class="skyblue">5077</span><br>
                                <span>剩余</span>
                            </div>
                        </div>
                    </li>


                    <li id="11307">
                        <a href="javascript:;" class="g-pic">
                            <img src="http://wlsqbucket.img-cn-shenzhen.aliyuncs.com/yyg/goods/1466561737946.jpg"
                                 width="136" height="136">
                        </a>
                        <span class="gray9">价值：￥338.00元</span>
                        <em style="color:#666">
                            <div class="Progress-bar">
                                <p class="u-progress">
                      <span class="pgbar" style="width: 12.42603550295858%;">
                        <span class="pging"></span>
                      </span>
                                </p>
                            </div>
                        </em>

                        <div class="partIn">
                            <div class="already">
                                <span class="orange">62</span><br>
                                <span style="font-size:0.1rem">已参与</span>
                            </div>
                            <div class="all">
                                <span class="allNum">100000</span><br>
                                <span>总需人次</span>
                            </div>
                            <div class="overplus">
                                <span class="skyblue">5077</span><br>
                                <span>剩余</span>
                            </div>
                        </div>
                    </li>


                    <li id="11308">
                        <a href="javascript:;" class="g-pic">
                            <img src="http://wlsqbucket.img-cn-shenzhen.aliyuncs.com/yyg/goods/1466561737946.jpg"
                                 width="136" height="136">
                        </a>
                        <span class="gray9">价值：￥338.00元</span>
                        <em style="color:#666">
                            <div class="Progress-bar">
                                <p class="u-progress">
                      <span class="pgbar" style="width: 12.42603550295858%;">
                        <span class="pging"></span>
                      </span>
                                </p>
                            </div>
                        </em>

                        <div class="partIn">
                            <div class="already">
                                <span class="orange">62</span><br>
                                <span style="font-size:0.1rem">已参与</span>
                            </div>
                            <div class="all">
                                <span class="allNum">100000</span><br>
                                <span>总需人次</span>
                            </div>
                            <div class="overplus">
                                <span class="skyblue">5077</span><br>
                                <span>剩余</span>
                            </div>
                        </div>
                    </li>


                    <li id="11310">
                        <a href="javascript:;" class="g-pic">
                            <img src="http://wlsqbucket.img-cn-shenzhen.aliyuncs.com/yyg/goods/1466561737946.jpg"
                                 width="136" height="136">
                        </a>
                        <span class="gray9">价值：￥338.00元</span>
                        <em style="color:#666">
                            <div class="Progress-bar">
                                <p class="u-progress">
                      <span class="pgbar" style="width: 12.42603550295858%;">
                        <span class="pging"></span>
                      </span>
                                </p>
                            </div>
                        </em>

                        <div class="partIn">
                            <div class="already">
                                <span class="orange">62</span><br>
                                <span style="font-size:0.1rem">已参与</span>
                            </div>
                            <div class="all">
                                <span class="allNum">100000</span><br>
                                <span>总需人次</span>
                            </div>
                            <div class="overplus">
                                <span class="skyblue">5077</span><br>
                                <span>剩余</span>
                            </div>
                        </div>
                    </li>

                    <li id="11311">
                        <a href="javascript:;" class="g-pic">
                            <img src="http://wlsqbucket.img-cn-shenzhen.aliyuncs.com/yyg/goods/1466561737946.jpg"
                                 width="136" height="136">
                        </a>
                        <span class="gray9">价值：￥338.00元</span>
                        <em style="color:#666">
                            <div class="Progress-bar">
                                <p class="u-progress">
                      <span class="pgbar" style="width: 12.42603550295858%;">
                        <span class="pging"></span>
                      </span>
                                </p>
                            </div>
                        </em>

                        <div class="partIn">
                            <div class="already">
                                <span class="orange">62</span><br>
                                <span style="font-size:0.1rem">已参与</span>
                            </div>
                            <div class="all">
                                <span class="allNum">100000</span><br>
                                <span>总需人次</span>
                            </div>
                            <div class="overplus">
                                <span class="skyblue">5077</span><br>
                                <span>剩余</span>
                            </div>
                        </div>
                    </li>
                    <li id="11312">
                        <a href="javascript:;" class="g-pic">
                            <img src="http://wlsqbucket.img-cn-shenzhen.aliyuncs.com/yyg/goods/1466561737946.jpg"
                                 width="136" height="136">
                        </a>
                        <span class="gray9">价值：￥338.00元</span>
                        <em style="color:#666">
                            <div class="Progress-bar">
                                <p class="u-progress">
                      <span class="pgbar" style="width: 12.42603550295858%;">
                        <span class="pging"></span>
                      </span>
                                </p>
                            </div>
                        </em>

                        <div class="partIn">
                            <div class="already">
                                <span class="orange">62</span><br>
                                <span style="font-size:0.1rem">已参与</span>
                            </div>
                            <div class="all">
                                <span class="allNum">100000</span><br>
                                <span>总需人次</span>
                            </div>
                            <div class="overplus">
                                <span class="skyblue">5077</span><br>
                                <span>剩余</span>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>

</div>
<!--限购专区-->
<div id="limit">
    <div class="limit_up">
        <div class="limit_up_m0">
            <a href="">
                <img width="180" height="180" src="images/limit.png">
            </a>
        </div>
        <div class="limit_up_m1">
            <div class="limit_up_m2">
                <a href="">
                    <img width="180" height="90" src="images/p.jpg">
                </a>
            </div>
            <div class="limit_up_m3">
                <a href="">
                    <img width="180" height="90" src="images/j.jpg">
                </a>
            </div>
        </div>
    </div>
    <div class="limit_down">
        <div class="limit_down_m1">
            <a href="">
                <img width="180" height="90"src="images/t.jpg">
            </a>
        </div>
        <div class="limit_down_m2">
            <a href="">
                <img width="180" height="90" src="images/c.jpg">
            </a>
        </div>
    </div>
</div>
<!--红包专区-->
<div id="redpakage">
    <div class="redpakage_up">
        <div class="redpakage_up_m0">
            <a href="">
                <img width="180" height="180"  src="images/red.png">
            </a>
        </div>
        <div class="redpakage_up_m1">
            <div class="redpakage_up_m2">
                <a href="">
                    <img width="180" height="90" src="images/p.jpg">
                </a>
            </div>
            <div class="redpakage_up_m3">
                <a href="">
                    <img width="180" height="90" src="images/j.jpg">
                </a>
            </div>
        </div>
    </div>
    <div class="redpakage_down">
        <div class="redpakage_down_m1">
            <a href="">
                <img width="180" height="90"src="images/t.jpg">
            </a>
        </div>
        <div class="redpakage_down_m2">
            <a href="">
                <img width="180" height="90" src="images/c.jpg">
            </a>
        </div>
    </div>
</div>
<!--晒单分享-->
<div id="share">
    <a href="#" class="greya"><div class="title" style="border:none;">晒单分享 <b class="arrow" ></b></div></a>
    <div class="share_m0">
        <a href="">
            <img width="100%" height="262" src="http://m.360buyimg.com/mobilecms/jfs/t2167/181/2906569245/127869/192f91ce/56f3b6fcN6186fe9b.png!q70.jpg">
            <div class="sharwords">
                这个是我一直想中
            </div>
        </a>
    </div>
    <div class="share_m1">
        <div class="share_m2">
            <a href="">
                <img width="100%" height="120" src="http://m.360buyimg.com/mobilecms/jfs/t2167/181/2906569245/127869/192f91ce/56f3b6fcN6186fe9b.png!q70.jpg">
                <div class="sharwords">
                    感谢一元购
                </div>
            </a>
        </div>
        <div class="share_m3">
            <a href="">
                <img width="100%" height="120" src="http://m.360buyimg.com/mobilecms/jfs/t2167/181/2906569245/127869/192f91ce/56f3b6fcN6186fe9b.png!q70.jpg">
                <div class="sharwords">
                    感谢未来社区
                </div>
            </a>
        </div>
    </div>
 </div>
</div>
<script src="js/idangerous.swiper.js"></script>
<script src="js/idangerous.swiper.scrollbar-2.1.js"></script>
<script type="text/javascript" src="js/touche.js"></script>
<script type="text/javascript" src="js/p-pull-refresh.js"></script>
<script>
    $(function () {
        $(".slider").MobileSlider({width: 640, height: 320, during: 3000});
        $(".proname").each(function(index,el){
            $(this).text(dealTextLength($(this).text(),20));
        })
    });
    //处理字符串长度较长溢出问题
    function dealTextLength(val,length) {
        val=val.length > length?val.substring(0, length) + "...":val;
        return val;
    }
    var mySwiper = new Swiper('.swiper-container',{
        scrollContainer: true,
        scrollbar: {
            container: '.swiper-scrollbar'
        }
    })
    var $statu = $('.loading-warp .text');
    var pullRefresh = $('#container').pPullRefresh({
        $el: $('#container'),
        $loadingEl: $('.loading-warp'),
        sendData: null,
        url: 'http://localhost:57313/Authentication%20platform/main.html',
        callbacks: {
            pullStart: function(){
                $statu.text('松开开始刷新');
            },
            start: function(){
                $statu.text('数据刷新中···');
            },
            success: function(response){
                $statu.text('数据刷新成功！');
            },
            end: function(){
                $statu.text('下拉刷新结束');
            },
            error: function(){
                $statu.text('找不到请求地址,数据刷新失败');
            }
        }
    });

</script>


</body>
</html>